<template>
    <form @submit.prevent="login">
        <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input type="username" class="form-control" id="username" aria-describedby="usernameHelp" v-model="username">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" v-model="password">
        </div>
        <div class="error_message">{{ error_message }}</div>
        <button type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
    </form>
</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex';
export default {
    name: 'ComLogin',
    setup() {
        const username = ref('');
        const password = ref('');
        const store = useStore();

        const login = () => {
            const user = ref([
                { username: 'admin', password: '123' },
                { username: 'user1', password: '123' },
            ]);
        
            const matchedUser = user.value.find(
                u => u.username === username.value && u.password === password.value
            );
        
            if (matchedUser) {
                store.dispatch('updateAuthStatus', {
                is_admin: username.value === 'admin',
                is_login: true,
                });
            }
        };
        
        return {
            login,
            username,
            password
        }
    }
}

</script>

<style scoped>
.btn-success {
    width: 100%;
}
</style>